<template>
    <div id="topline">
        <img id="topico" src="../static/topmain.png" alt="">
        <div id="topword">
         <router-link to='/'><span class="mainpage" :class="{active:isactive}" @click="isactive=true">生成二维码</span></router-link>
        <router-link to='/Upfile'><span class="mainpage" :class="{active:!isactive}" @click="isactive=false">解码</span></router-link>
        </div>
        <!-- <div id="join">免费注册</div> -->
    </div>
</template>

<script>
export default {
name:'Topbar',
data(){
    return{
    isactive:true,
}
}
}
</script>

<style scoped>
#topline{
    position: relative;
    width: 100%;
    height: 70px;
    background-color: white;
display: flex;
}
#topico{
    height: 27px;
    align-self: center;
    margin-left: 290px;
    
}
#topword{
    height: 27px;
    align-self: center;

}
.mainpage{
position: relative;
left:610px;
/* word-spacing:1em; */
font-weight: 350;
font-size:14px;
margin-left: 30px;
color: #333333;
cursor: pointer;
}
.mainpage:hover{
    color:#3785ED;
}
.active{
    color:#3785ED;
}

#otherlink,#tologin{
position: relative;
left:400px;
 font-size: 16px;
clear: left;
margin-left: 30px;
}
#otherlink:hover,#tologin:hover{
color: #3a993f;
cursor: pointer;
}
#tologin{
position: relative;
 margin-left: 300px;
font-size: 15px;
}
#join{
position: relative;
font-size: 14px;
left:430px;
align-self: center;
width: 90px;
height: 30px;
background-color: #3cb067;
border-radius: 5px ;
color: aliceblue;
text-align: center;
 line-height: 30px;
 
}
</style>